<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title id="pageTitle">加载中...</title>
  <link rel="icon" type="image/png" sizes="56x56" href="FreeAPI.png" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
  <link rel="stylesheet" href="css/style.css" />
</head>
<body>

<div data-include="nav.html"></div>

  <!-- 页面主体内容 -->
  <div class="container">
    <div data-include="header.html"></div>

    <div class="controls">
      <input type="text" class="filter-input" id="searchInput" placeholder="搜索接口..." />
    </div>

    <div class="stats" id="stats"></div>

    <div class="card-container" id="cardContainer">
      <div class="loader" id="loader">
        <div class="loader-spinner"></div>
        <p>正在加载接口数据...</p>
      </div>
    </div>

    <div class="donate-section">
      <h2 class="donate-title"><i class="fas fa-heart" style="color: #d85a5a;"></i> 赞赏名单</h2>
      
      <p class="donate-desc">感谢赞赏的人，因为你们，让我感受到更新更多免费API的动力。</p>
      
      <div class="donate-notice">
        首页仅显示排名前 10 位，完整名单请看 <a href="donate.html">这里</a>
      </div>
      
      <div class="donors-list" id="donorsContainer">
        <!-- 捐赠者将通过JavaScript动态加载 -->
      </div>
    </div>

    <div data-include="footer.html"></div>
  </div>

  <!-- 浮动按钮 -->
  <div class="floating-buttons">
    <button id="theme-toggle" class="floating-btn" aria-label="切换主题" onclick="toggleTheme()">
      <i class="fas fa-moon"></i>
    </button>
    <button id="scroll-to-top" class="floating-btn" aria-label="返回顶部">
      <i class="fas fa-arrow-up"></i>
    </button>
  </div>
  
  <script>
    // 直接在页面添加主题切换功能
    function toggleTheme() {
      console.log('主题切换按钮被直接点击');
      const htmlElement = document.documentElement;
      const currentTheme = htmlElement.getAttribute('data-theme') || 'light';
      const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
      
      // 应用主题
      htmlElement.setAttribute('data-theme', newTheme);
      localStorage.setItem('theme', newTheme);
      
      // 更新图标
      const themeIcon = document.querySelector('#theme-toggle i');
      if (themeIcon) {
        themeIcon.className = newTheme === 'dark' ? 'fas fa-sun' : 'fas fa-moon';
      }
      
      // 按钮动画
      const themeToggleBtn = document.getElementById('theme-toggle');
      if (themeToggleBtn) {
        themeToggleBtn.style.transform = 'scale(0.8)';
        setTimeout(() => {
          themeToggleBtn.style.transform = '';
        }, 300);
      }
      
      return false;
    }
    
    // 页面加载时应用保存的主题
    document.addEventListener('DOMContentLoaded', function() {
      const savedTheme = localStorage.getItem('theme');
      const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
      const currentTheme = savedTheme || (systemPrefersDark ? 'dark' : 'light');
      
      // 应用主题
      document.documentElement.setAttribute('data-theme', currentTheme);
      
      // 更新图标
      const themeIcon = document.querySelector('#theme-toggle i');
      if (themeIcon) {
        themeIcon.className = currentTheme === 'dark' ? 'fas fa-sun' : 'fas fa-moon';
      }
    });
  </script>

  <!-- 脚本 -->
  <script src="js/toproll.js" defer></script>
  <script src="js/main.js" defer></script>
  <script>
  // 初始化顶部导航
  document.addEventListener('DOMContentLoaded', function() {
    // 确保toproll.js先加载完成
    setTimeout(() => {
      initializeTopNav();
      // 加载赞赏数据
      loadDonors();
    }, 100);
  });
  
  function loadDonors() {
    fetch('config/donate.json')
      .then(response => {
        if (!response.ok) {
          throw new Error(`服务器响应错误: ${response.status}`);
        }
        return response.json();
      })
      .then(data => {
        // 按金额排序
        const sortedDonors = [...data.donors].sort((a, b) => {
          // 提取数字部分，先移除逗号，再移除"元"字符
          const amountA = parseFloat(a.amount.replace(/,/g, '').replace(/元$/, ''));
          const amountB = parseFloat(b.amount.replace(/,/g, '').replace(/元$/, ''));
          
          // 打印调试信息
          console.log(`${a.name}: ${a.amount} => ${amountA}`);
          console.log(`${b.name}: ${b.amount} => ${amountB}`);
          
          return amountB - amountA; // 降序排列
        });
        
        // 打印排序后的结果
        console.log('排序后的赞助者：', sortedDonors.map(d => `${d.name}: ${d.amount}`));
        
        // 只取前10名
        const topDonors = sortedDonors.slice(0, 10);
        
        const donorsContainer = document.getElementById('donorsContainer');
        
        // 清空容器
        donorsContainer.innerHTML = '';
        
        // 添加赞助者
        topDonors.forEach(donor => {
          const donorElement = document.createElement('div');
          donorElement.className = 'donor-item';
          
          const displayName = donor.name === "苦逼的管理员" ? "苦逼的管理员" : donor.name;
          
          donorElement.innerHTML = `
            <img src="${donor.avatar}" alt="${displayName}" class="donor-avatar" onerror="this.src='img/01.png'">
            <div class="donor-info">
              <h4>${displayName}</h4>
              <p>${donor.amount}</p>
            </div>
          `;
          donorsContainer.appendChild(donorElement);
        });
      })
      .catch(error => {
        console.error('加载赞赏数据失败:', error);
        document.getElementById('donorsContainer').innerHTML = `
          <div style="width: 100%; text-align: center; padding: 20px;">
            <i class="fas fa-exclamation-triangle" style="color: #d85a5a; font-size: 24px;"></i>
            <p style="margin-top: 10px;">加载赞赏数据失败</p>
          </div>
        `;
      });
  }
  </script>
</body>
</html>
